<template>
  <div class="custom">
    <div class="item">圯桥进履</div>
    <div class="item">圯桥进履</div>
    <div class="item">圯桥进履</div>
    <div class="mask">
      <div class="box" ref="box"></div>
      <div class="panel" ref="panel">
        <el-button>下一步</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    init() {
      const items = document.querySelectorAll('.item')
      const {left, top} = items[0].getBoundingClientRect()
      this.$refs.box.style.left = left + 'px'
      this.$refs.box.style.top = top + 'px'
      this.$refs.panel.style.left = left + 200 + 'px'
      this.$refs.panel.style.top = top + 'px'
    }
  },
  mounted() {
    this.init()
  }
}
/*
* 通过一个蒙板和 z-index 来显示
* */
</script>

<style scoped lang="scss">
.custom {
  .item {
    position: relative;
    z-index: 100;
  }
  .mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .6);
    .box {
      position: absolute;
      background-color: #fff;
      width: 100px;
      height: 20px;
    }
    .panel {
      position: absolute;
    }
  }
}
</style>